<template>
  <div class="me">
    <el-row>
      <el-col :span="24">
        <div class="title">
          <span @click="$router.replace('/home')">返回商场</span>
          <span @click=" headerlogout">退出登录</span>
        </div>
      </el-col>
    </el-row>

    <div class="contaner">
      <el-col :span="6" class="right">
        <div class="img">
          <img src="/images/马里奥.png" alt="">
        </div>
        <el-menu default-active="1" class="meright" active-text-color="#797992" router>
          <el-menu-item index="1" class="index1" @click="goto('/me/info')">
            <template slot="title">
              <i class="el-icon-user"></i>
              <span>我的资料</span>
            </template>
          </el-menu-item>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-user"></i>编辑资料</template>
            <el-menu-item index="/me/updateinfo">修改信息</el-menu-item>
            <el-menu-item index="/me/updatepwd">修改密码</el-menu-item>
          </el-submenu>

        </el-menu>
      </el-col>
      <el-col :span="18" class="left">
        <router-view></router-view>
      </el-col>

    </div>

  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions(['logout']),
    goto(path) {
      this.$router.replace(path)
    },
    //退出登录
    headerlogout() {
      this.$confirm('是否退出账号', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '退出成功'
          })
          let result = this.logout({})
          window.localStorage.removeItem('userinfo')
          this.$router.replace('/home')
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出'
          })
        })
    }
  }
}
</script>

<style scoped lang='less'>
.me {
  height: 100vh;
  .title {
    float: right;
    margin-right: 50px;

    span {
      margin-right: 30px;
      line-height: 50px;
      color: #797992;
      font-size: 18px;
      font-weight: 800;
      cursor: pointer;
    }
  }
  .contaner {
    height: 95vh;
    display: flex;

    .right {
      border-right: 1px solid #e6e6e6;
    }
    .img {
      margin: 20px;
      text-align: center;
      img {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        border: 1px solid black;
      }
    }
    .meright {
      margin-top: 10vh;
      .index1 {
        height: 70px;
        font-size: 18px;
        line-height: 70px;
      }
      .index2 {
        height: 70px;
        font-size: 18px;
        line-height: 70px;
      }
    }
  }
}
.el-col-24 {
  background: #323233;
  height: 5vh;
}
.el-menu-item.is-active {
  background: #323233;
}
/deep/.el-menu-item {
  background-color: transparent;
}
/deep/.el-submenu__title {
  height: 70px;
  font-size: 18px;
  line-height: 70px;
}
/deep/.el-submenu.is-active .el-submenu__title {
  background-color: transparent;
}
/deep/.el-submenu__title:hover {
  background-color: transparent;
}
</style>